:root {
    --duration: 5s;
    --ease: cubic-bezier(0.6, 0, 0.2, 1);
}

.sixth {
    * {
        position: relative;
    }
    .digit {
        stroke-width: 30;
        animation: var(--duration) var(--ease) both alternate infinite;
        animation-delay: calc((var(--i) * 0.05s));

        //animation-play-state: paused;

        circle,
        path {
            animation: inherit;
            stroke: var(--color);
            stroke-linejoin: round;
            stroke-linecap: round;
            /* Additional offsets for rounded stroke */
            stroke-dashoffset: -1.2;
            stroke-dasharray: 1 1.2;
        }

        circle {
            animation-name: circle-draw;

            @keyframes circle-draw {
                0%,
                5% {
                    stroke-dasharray: 0 1.2 0.2 0.3;
                    stroke-dashoffset: 1.75;
                }

                18%,
                50% {
                    stroke-dasharray: 1 1.1;
                    stroke-dashoffset: 0;
                }
                70%,
                100% {
                    stroke-dashoffset: -1.1;
                }
            }
        }

        path {
            animation-name: path-draw;

            @keyframes path-draw {
                0%,
                43% {
                    stroke-dashoffset: 1.1;
                }
                //25%, 50% { stroke-dashoffset: 0; }
                90%,
                100% {
                    stroke-dashoffset: 0;
                }
            }
        }
    }

    .digit {
        animation-name: digit;

        &:nth-child(1) {
            --x-offset: 150%;
        }
        &:nth-child(2) {
            --x-offset: 50%;
        }
        &:nth-child(3) {
            --x-offset: -50%;
        }
        &:nth-child(4) {
            --x-offset: -150%;
        }

        &:nth-child(even) {
            // pixel pushing by Shaw™
            --y-offset: calc(-25% + 2%);
        }
        &:nth-child(odd) {
            --y-offset: calc(25% - 12%);
        }

        @keyframes digit {
            from,
            15% {
                transform: translate(var(--x-offset, 0), var(--y-offset, 0));
            }
            30% {
                transform: translate(0%, var(--y-offset));
            }
            45%,
            to {
                transform: none;
            }
        }
    }

    .digits {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
}
